<template>
  <div class="chartType fr pr mb20">
    <h4 class="chartTitle pa">类型政策分析</h4>
    <div id="chartType" style="width: 100%;height: 344px;"></div>
  </div>
</template>

<script> 
import { postAjax, getAjax } from "../../../api/api.js";
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      datas:[
        // {value:335, name:'项目申报类'},
        // {value:310, name:'资质认定类'},
        // {value:234, name:'财税奖补类'}
      ],
      titleData: []
    };
  },
  methods: {
      //获取类型数量
      getTypeCount(){
        this.$Loading.start();
          getAjax('/policyInfo/getTypeCount')
          .then((response) => {
            if(response.data.code === 0){
              this.$Loading.finish();
              this.datas = [];
              let _this = this
              response.data.obj.forEach(element => {
                _this.datas.push({'name':element.name,'value':element.value})
                _this.titleData.push(element.name)
              });
              this.Pie("chartType");
            }else {
              this.$Loading.error();
              this.$Message.warning("数据请求异常")
            }
          })
      },
    Pie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: '10',
          top: '50',
          data:this.titleData,
          textStyle: {
            fontSize: '14'
          }
        },
        color:['#96c935','#fba259','#2399ee'],
        series : [
          {
            name: '类型政策分析',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:this.datas,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {

              normal: {
                position: 'inner',
                formatter: '{c}'
              }
            }
          }
        ]
      });
    }
  },
  //调用
  mounted() {
    this.getTypeCount()
    // this.$nextTick(function() {
    //   this.Pie("chartType");
    // });
  }
};
</script>
<style>
  .chartTitle{
    color: #333;
    top:15px;
    left:20px;
    font-size: 16px;
    display: inline-block;
    font-weight: bold;
  }

</style>
